import React, { useEffect, useState } from "react";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import "./tabbar.less";
import { useLocation, useNavigate } from "react-router-dom";
import { display } from "@mui/system";
const home_1 = require("@/assets/images/tabbar/home_1.png");
const home_2 = require("@/assets/images/tabbar/home_2.png");
const fast = require("@/assets/images/tabbar/fast.png");
const my_1 = require("@/assets/images/tabbar/my_1.png");
const my_2 = require("@/assets/images/tabbar/my_2.png");
const navs = [
  {
    path: "/home",
    text: "首页",
    icon: home_1,
    active: home_2,
  },
  {
    path: "/fast",
    text: "快速刷题",
    icon: fast,
    active: fast,
  },
  {
    path: "/mine",
    text: "我的",
    icon: my_1,
    active: my_2,
  },
];
export default function Tabbar() {
  // const location = useLocation();
  // console.log(location);
  const { pathname } = useLocation();
  const index = navs.findIndex((item) => item.path === pathname);
  const [value, setValue] = React.useState(index);
  const nav = useNavigate();
  return (
    // 如果index >=0时，才显示出底部tab栏，findIndex找不到对应index时就是-1，所以-1不显示
    <div className="fixed" style={{ display: index >= 0 ? "block" : "none" }}>
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue) => {
          // console.log(newValue);
          setValue(newValue);
          nav(navs[newValue].path);
        }}
      >
        {navs.map((item, index) => (
          <BottomNavigationAction
            key={index}
            label={item.text}
            // onClick={() => nav(item.path)}
            icon={<img src={value === index ? item.icon : item.active} />}
          />
        ))}
      </BottomNavigation>
    </div>
  );
}
